﻿@using Newtonsoft.Json
@using LoanProject.Models
@{
    ViewBag.Title = "Home Page";
}
@section scripts {
    <script type="text/javascript">
        $(function () {
            $(".datepicker").datepicker();
            $('body').click(function (e) { if ($('.popover, .ins-edit-field').has(e.target).length === 0 && !$('.popover, .ins-edit-field').is(e.target)) { 
                $('.ins-edit-field').popover('hide'); } 
            });
            $(".ins-edit-field").popover(
                {
                    html:"true",
                    trigger:"manual",
                    placement:"right",
                    content:"<div id='edit-popup' ><h4>เปลี่ยนเงินส่ง</h4><input type='text' name='installment' id='installment'/>"+
                        "<a role='button' class='btn' href='javascript: viewModel.editInstallment();'>Test Validate by link</a>"+
                        "</div>"
                }).click(function(e) {
                    $('.ins-edit-field').filter(function(index, el) { return el != e.target; }).popover('hide');
                    $(this).popover('toggle');
                    e.stopPropagation();
                });
            $("#edit-popup").validate({
                rules: {
                    installment: {
                        required: true,
                        number: true
                    }
                },
                submitHandler: function(form) {
                    // your ajax would go here
                    alert('simulated ajax submit');
                    return false;  // blocks regular submit since you have ajax
                }
            });
            
        });
        
        
        var initialData = @Html.Raw(Json.Encode(Model))
    </script>
}
@section featured {

    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
                <h2>@ViewBag.Message</h2>
            </hgroup>
            <p>
                To learn more about ASP.NET MVC visit
                <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
                The page features <mark>videos, tutorials, and samples</mark> to help you get the most from ASP.NET MVC.
                If you have any questions about ASP.NET MVC visit
                <a href="http://forums.asp.net/1146.aspx/1?MVC" title="ASP.NET MVC Forum">our forums</a>.
            </p>
        </div>
    </section>
}
<h3>We suggest the following:</h3>
<form data-bind="submit: calculate">
    <div>
        เงินต้น
        <input type="text" id="txtPrinciple" name="txtPrinciple" /><br />
        เงินส่ง
        <input type="text" id="txtInstallment" name="txtInstallment" />
        <br />
        วันที่เริ่มจ่าย
        <input type="text" class="datepicker" id="txtStartDate" name="txtStartDate" />
        <input type="submit" value="Calculate" class="btn btn-primary" />
        <a onclick="testKOchangeModel();" class="btn btn-primary">test</a>
    </div>
</form>
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<table class="table table-hover loan">
    <thead>
        <tr>
            <th>งวดที่</th>
            <th>เงินต้นคงเหลือ</th>
            <th>จ่ายต่อเดือน</th>
            <th>ดอกเบี้ย</th>
            <th>เป็นดอกเบี้ย</th>
            <th>เป็นเงินต้น</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: loanMonthlys">
        <tr data-bind="attr: { period: Period }">
            <td><span data-bind="text: Period"></span></td>
            <td><span data-bind="text: RemainPrinciple.Text"></span></td>
            <td>
                <a data-bind="text: Installment.Text" class="ins-edit-field"></a>
            </td>
            <td><span data-bind="text: Interest.Text"></span></td>
            <td><span data-bind="text: InterestAmount.Text"></span></td>
            <td><span data-bind="text: PaidPrinciple.Text"></span></td>
        </tr>
    </tbody>
</table>
@*@MvcHtmlString.Create("<script>var k=" + Json.Encode(((List<LoanMonthly>)Model).Select(lm => new LoanMonthlyJson
{
    DateTime = lm.DateTime,
    Interest = Math.Round(lm.Interest.Value, 2),
    Installment = Math.Round(lm.Installment, 2),
    Period = lm.Period,
    PaidPrinciple = Math.Round(lm.PaidPrinciple.Value, 2)
})) + "</script>")*@
@Scripts.Render("~/bundles/index")


